<script lang="ts">
import { ref } from 'vue'
import { ElNotification } from 'element-plus'
import service from "@/api";
// 上传文件
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
import type { UploadFile } from 'element-plus'

export default {
    name: 'OperationSixthDetail',
    setup(props, { emit }) {
        const dialogImageUrl = ref('')
        const dialogVisible = ref(false)
        const disabled = ref(false)

        // 表单数据  基本信息  
        var baseInfo = ref({
            buildId: '1',
            build: '1',
            roomName: '马龙',
            socialCode: '张继科',
            responseName: '姚园',
            telephone: '1',
            industry: '1',
            scale: '2',
            capital: '3',
            ifSalary: "1",
            onMarket: '1',
            valuation: '1',
            license: '1',
            logo: '1'
        })
        // 基本信息 表单验证规则
        var rules = ref({
            buildId: [
                { required: true, message: '请输入租户名称', trigger: 'blur' }
            ],
            build: [
                { required: true, message: '请选择所属楼宇', trigger: 'blur' }
            ],
            roomName: [
                { required: true, message: '请输入房间名称', trigger: 'blur' }
            ],
            socialCode: [
                { required: true, message: '请输入统一社会信用代码', trigger: 'blur' }
            ],
            responseName: [
                { required: true, message: '请输入负责人姓名', trigger: 'blur' }
            ],
            telephone: [
                { required: true, message: '请输入联系方式', trigger: 'blur' }
            ],
            industry: [
                { required: true, message: '请选择所属行业', trigger: 'blur' }
            ],
            scale: [
                { required: true, message: '请选择企业规模', trigger: 'blur' }
            ],
        })

        // 定义提示框是否显示的数据
        var centerDialogVisible = ref(false)
        // 点击×  点击确定 点击取消
        var showhide = () => {
            centerDialogVisible.value = false
            emit('showAdd')
        }



        // 上传文件的事件
        // 删除文件
        var handleRemove = (file: UploadFile) => {
            console.log(file)
        }
        // 查看图片
        var handlePictureCardPreview = (file: UploadFile) => {
            dialogImageUrl.value = file.url!
            dialogVisible.value = true
            console.log('在查看图片');
        }
        // 下载文件
        var handleDownload = (file: UploadFile) => {
            console.log(file)
        }
        return {
            centerDialogVisible,
            baseInfo,
            rules,
            dialogImageUrl,
            dialogVisible,
            disabled,
            showhide,
            handleRemove,
            handlePictureCardPreview,
            handleDownload,
        }
    }
}

</script>
<template>
    <div class="operation_sixth_detail">
        <div class="operation_sixth_detail_1">
            <!-- 顶部 -->
            <div class="detail_top">
                <div class="left">
                    <span></span>
                    租户名称
                </div>
                <img src="@/assets/zuhuxincengX.svg" alt="" @click="centerDialogVisible = true">
                <!-- 提示框 -->
                <el-dialog v-model="centerDialogVisible" width="30%" align-center>
                    <span class="dialog_title">你确认关闭此页面吗?</span>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="centerDialogVisible = false">取消</el-button>
                            <el-button type="primary" @click="showhide">确定</el-button>
                        </span>
                    </template>
                </el-dialog>
            </div>

            <!-- 基本信息 -->
            <div class="basemessage">
                <h3>基<br>本<br>信<br>息</h3>
                <div class="base_right">
                    <el-form :inline="true" :model="baseInfo" class="demo-form-inline" :rules="rules" label-position="right"
                        label-width="auto">
                        <el-form-item label="租户名称" prop="buildId">
                            <el-input v-model="baseInfo.buildId" placeholder="请输入租户名称" />
                        </el-form-item>
                        <el-form-item label="所属楼宇" prop="build">
                            <el-select v-model="baseInfo.build" placeholder="请选择">
                                <el-option label="A1幢" value="A1" />
                                <el-option label="B2幢" value="B2" />
                                <el-option label="C3幢" value="C3" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="房间名称" prop="roomName">
                            <el-input v-model="baseInfo.roomName" placeholder="请输入房间名称" />
                        </el-form-item>
                        <el-form-item label="社会信用代码" prop="socialCode">
                            <el-input v-model="baseInfo.socialCode" placeholder="请输入统一社会信用代码" />
                        </el-form-item>
                        <el-form-item label="负责人姓名" prop="responseName">
                            <el-input v-model="baseInfo.responseName" placeholder="请输入负责人姓名" />
                        </el-form-item>
                        <el-form-item label="联系方式" prop="telephone">
                            <el-input v-model="baseInfo.telephone" placeholder="请输入联系方式" />
                        </el-form-item>
                        <el-form-item label="所属行业" prop="industry">
                            <el-select v-model="baseInfo.industry" placeholder="请选择">
                                <el-option label="信息传输、软件和信息技术服务业" value="1" />
                                <el-option label="金融业" value="2" />
                                <el-option label="住宿和餐饮业" value="3" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="企业规模" prop="scale">
                            <el-select v-model="baseInfo.scale" placeholder="请选择">
                                <el-option label="特大型" value="A" />
                                <el-option label="大型" value="B" />
                                <el-option label="中型" value="C" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="注册资金">
                            <el-input v-model="baseInfo.capital" placeholder="请输入注册资金" />
                        </el-form-item>
                        <el-form-item label="是否高薪">
                            <el-select v-model="baseInfo.ifSalary" placeholder="请选择">
                                <el-option label="是" value="0" />
                                <el-option label="否" value="1" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="是否上市">
                            <el-select v-model="baseInfo.onMarket" placeholder="请选择">
                                <el-option label="是" value="0" />
                                <el-option label="否" value="1" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="企业估值">
                            <el-input v-model="baseInfo.valuation" placeholder="请输入企业估值" />
                        </el-form-item>
                        <el-form-item label="营业执照">
                            <!-- 上传文件的按钮 -->
                            <el-upload class="upload_btn" action="#" list-type="picture-card" :auto-upload="false">
                                <el-icon>
                                    <Plus />
                                </el-icon>

                                <template #file="{ file }">
                                    <div>
                                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                                        <span class="el-upload-list__item-actions">
                                            <span class="el-upload-list__item-preview"
                                                @click="handlePictureCardPreview(file)">
                                                <el-icon><zoom-in /></el-icon>
                                            </span>
                                            <span v-if="!disabled" class="el-upload-list__item-delete"
                                                @click="handleDownload(file)">
                                                <el-icon>
                                                    <Download />
                                                </el-icon>
                                            </span>
                                            <span v-if="!disabled" class="el-upload-list__item-delete"
                                                @click="handleRemove(file)">
                                                <el-icon>
                                                    <Delete />
                                                </el-icon>
                                            </span>
                                        </span>
                                    </div>
                                </template>
                            </el-upload>
                            <el-dialog v-model="dialogVisible">
                                <img w-full :src="dialogImageUrl" alt="Preview Image" />
                            </el-dialog>
                        </el-form-item>
                        <el-form-item label="企业LOGO">
                            <!-- 上传文件的按钮 -->
                            <el-upload class="upload_btn" action="#" list-type="picture-card" :auto-upload="false">
                                <el-icon>
                                    <Plus />
                                </el-icon>

                                <template #file="{ file }">
                                    <div>
                                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                                        <span class="el-upload-list__item-actions">
                                            <span class="el-upload-list__item-preview"
                                                @click="handlePictureCardPreview(file)">
                                                <el-icon><zoom-in /></el-icon>
                                            </span>
                                            <span v-if="!disabled" class="el-upload-list__item-delete"
                                                @click="handleDownload(file)">
                                                <el-icon>
                                                    <Download />
                                                </el-icon>
                                            </span>
                                            <span v-if="!disabled" class="el-upload-list__item-delete"
                                                @click="handleRemove(file)">
                                                <el-icon>
                                                    <Delete />
                                                </el-icon>
                                            </span>
                                        </span>
                                    </div>
                                </template>
                            </el-upload>
                            <el-dialog v-model="dialogVisible">
                                <img w-full :src="dialogImageUrl" alt="Preview Image" />
                            </el-dialog>
                        </el-form-item>
                    </el-form>
                </div>
            </div>

        </div>
    </div>
</template>
<style scoped lang="scss">
.operation_sixth_detail {
    height: 100%;
    box-sizing: border-box;
    padding: 20px 15px 15px 15px;

    .operation_sixth_detail_1 {
        height: 100%;
        background-color: white;
        padding: 0 20px;

        .detail_top {
            height: 60px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid black;

            .left {
                display: flex;
                align-items: center;
                font-size: 20px;
                font-weight: 600;
                margin-left: 15px;

                span {
                    width: 8px;
                    height: 25px;
                    background: rgb(94, 128, 234);
                    margin-right: 15px;
                }
            }

            img {
                display: inline-block;
            }

            .dialog_title {
                font-size: 18px;
            }
        }

        .basemessage {
            width: 100%;
            height: 400px;
            margin-top: 15px;
            display: flex;
            justify-content: space-between;

            h3 {
                width: 35px;
                height: 100%;
                background-color: #027db4;
                border-radius: 10px 0 0 10px;
                color: white;
                line-height: 80px;
                font-weight: 600;
                display: flex;
                justify-content: center;
                align-items: center;

            }

            .base_right {
                width: 100%;
                height: 100%;
                border: 1px solid black;
                border-left: none;

                .demo-form-inline {
                    box-sizing: border-box;
                    padding: 0 50px;

                    .el-form-item {
                        width: 25%;
                        margin-top: 15px;
                        margin-right: 175px;

                        .el-input {
                            width: 100%;
                        }

                        .el-select {
                            width: 100%;
                        }
                    }

                    :deep(.el-upload--picture-card) {
                        width: 100px;
                        height: 100px;
                    }
                }

                .demo-form-inline :nth-child(3n) {
                    margin-right: 0px;
                }
            }
        }

    }
}
</style>
